<template>
	<view class="content" :style="{ height: `calc(100vh - ${statusBarHeight}rpx)` }">
		<!-- 头部 -->
		<customHeader></customHeader>
		<view class="content_center">
            <!-- 侧边栏 -->
            <view class="left_content">
                <view 
                    class="side_item" 
                    :class="{'active': item.active}"
                    v-for="(item, index) in sidebarList" 
                    :key="index" 
                    @click="changeMenus(item, index)">
                    <text class="iconfont" :class="item.icon"></text>
                    <view class="meusName">{{ item.name }}</view>
                </view>
            </view>
            <!-- 内容 -->
            <view class="right_content">
                <home v-if="menusName == '首页'"></home>
                <shopCart v-if="menusName == '购物车'"></shopCart>
                <user v-if="menusName == '我的'"></user>
            </view>
		</view>
	</view>
</template>

<script>
import customHeader from "@/components/custom-header/custom-header.vue";
import home from '@/orderPages/home/home.vue'
import shopCart from '@/orderPages/shopCart/shopCart.vue'
import user from '@/orderPages/user/user.vue'
	export default {
		components: {
			customHeader,
            home,
            shopCart,
            user,
		},
		data() {
			return {
				statusBarHeight: 0,
                sidebarList: [
                    { name: '首页', icon: 'icon-shouye', path: '/pages/index/index', active: true },
                    { name: '购物车', icon: 'icon-gouwuche', path: '/pages/index/index', active: false },
                    { name: '我的', icon: 'icon-wode', path: '/pages/index/index', active: false },
                ]
			}
		},
        computed: {
            menusName() {
                return this.sidebarList.filter(item => item.active)[0].name || '首页'
            }
        },
		onLoad() {
            this.statusBarHeight = this.$globalMap.statusBarHeight
		},
		methods: {
            changeMenus(item, index) {
                this.sidebarList = this.sidebarList.map(i => ({...i, active: i.name == item.name ? true : false}))
            }
		}
	}
</script>

<style lang="less" scoped>
.content {
    height: 100vh;
	.content_center {
        display: flex;
        height: 100%;
        .left_content {
            padding: 10rpx;
            background: #30373f;
            color: #fff;

            .side_item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 40rpx 0;
                .iconfont {
                    font-size: 40rpx;
                }
                .meusName {
                    font-size: 20rpx;
                }
            }

            .active {
                color: #f9a94d;
            }
           
        }
        
        .right_content {
            flex: 1;
        }
	}
}
</style>
